<template>
  <div class="detail-container" v-loading="loading">
    <div class="detail-content" v-if="goodsInfo">
      <div class="left-section">
        <img :src="goodsInfo.picture" class="goods-image" />
      </div>
      
      <div class="right-section">
        <h1 class="title">{{ goodsInfo.title }}</h1>
        
        <div class="price-section">
          <span class="price">¥{{ goodsInfo.price }}</span>
          <span class="pay">{{ goodsInfo.pay }}</span>
        </div>
        
        <div class="address-section">
          <i class="el-icon-location"></i>
          <span>{{ goodsInfo.address }}</span>
        </div>

        <div class="quantity-section">
          <span class="label">购买数量：</span>
          <el-input-number 
            v-model="quantity" 
            :min="1" 
            :max="99"
            size="small"
          ></el-input-number>
        </div>

        <div class="action-section">
          <el-button type="primary" @click="buyNow">立即购买</el-button>
          <el-button type="warning" @click="addToCart">加入购物车</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsDetail',
  data() {
    return {
      goodsInfo: null,
      quantity: 1,
      loading: true
    }
  },
  created() {
    this.getGoodsDetail();
  },
  methods: {
    getGoodsDetail() {
      const id = this.$route.params.id;
      this.$axios
        .get(`/products/app/goods/${id}`)
        .then(res => {
          this.goodsInfo = res.data;
          this.loading = false;
        })
        .catch(err => {
          this.$message.error('获取商品详情失败');
          this.loading = false;
          return Promise.reject(err);
        });
    },
    buyNow() {
      // 检查是否登录
      if (!this.$store.getters.getUser) {
        this.$message.warning('请先登录');
        this.$store.commit('setShowLogin', true);
        return;
      }
      // TODO: 实现购买逻辑
      this.$message.success('正在跳转到支付页面...');
    },
    addToCart() {
      // 检查是否登录
      if (!this.$store.getters.getUser) {
        this.$message.warning('请先登录');
        this.$store.commit('setShowLogin', true);
        return;
      }
      // TODO: 实现加入购物车逻辑
      this.$message.success('成功加入购物车');
    }
  }
}
</script>

<style scoped>
.detail-container {
  max-width: 1225px;
  margin: 20px auto;
  padding: 20px;
}

.detail-content {
  display: flex;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.left-section {
  width: 400px;
  padding: 20px;
}

.goods-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.right-section {
  flex: 1;
  padding: 20px 30px;
}

.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.price-section {
  margin: 20px 0;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.price {
  font-size: 28px;
  color: #ff6700;
  font-weight: bold;
  margin-right: 10px;
}

.pay {
  color: #999;
  font-size: 14px;
}

.address-section {
  color: #666;
  font-size: 14px;
  margin: 15px 0;
}

.address-section i {
  margin-right: 5px;
}

.quantity-section {
  margin: 30px 0;
}

.label {
  margin-right: 10px;
  color: #666;
}

.action-section {
  margin-top: 30px;
}

.action-section .el-button {
  width: 180px;
  margin-right: 20px;
}
</style> 